<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:Orbifold.Trefoil"
    >
  <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
    <!-- This must be named as PART_ContentHost -->
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{StaticResource NormalBackgroundBrush}"/>
  </ControlTemplate>
  <Style  TargetType="{x:Type ComboBox}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ComboBox}">
          <Grid>
            <!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
            <ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
            <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>

            <!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
            <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>

            <!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
            <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
              <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                <Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
                <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">

                  <!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
                  <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>

                </ScrollViewer>
              </Grid>
            </Popup>
          </Grid>
          <ControlTemplate.Triggers>
            <!-- This forces the DropDown to have a minimum size if it is empty -->
            <Trigger Property="HasItems" Value="false">
              <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
            </Trigger>
            <Trigger Property="IsGrouping" Value="true">
              <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
            </Trigger>
            <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
              <Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
              <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
            </Trigger>
            <Trigger Property="IsEditable" Value="true">
              <Setter Property="IsTabStop" Value="false"/>
              <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
              <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Simple ComboBoxItem - This is used for each item inside of the ComboBox. You can change the selected color of each item below-->
  <Style x:Key="SimpleComboBoxItem"  TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ComboBoxItem}">
          <Grid SnapsToDevicePixels="true">
            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </Grid>
          <ControlTemplate.Triggers>

            <!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items -->
            <Trigger Property="IsHighlighted" Value="true">
              <Setter Property="Background" Value="{DynamicResource SelectedBackgroundBrush}" TargetName="Border"/>
            </Trigger>

            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

</ResourceDictionary>